<template>
  <div id="app">
    <top></top>
    <!--    <keep-alive exclude="Login, Register">-->
    <!--      <router-view />-->
    <!--    </keep-alive>-->
    <router-view
      :style="'min-height: ' + (screenHeight - 120) + 'px;'"
    ></router-view>
    <footer-vue></footer-vue>
  </div>
</template>

<script>
import Top from './components/Top'
import FooterVue from './components/FooterVue'

export default {
  name: 'app',
  components: {
    Top,
    FooterVue
  },
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      // isRouteAlive: true,
      screenHeight: document.body.clientHeight,
      screenWidth: document.body.clientWidth
    }
  },
  beforeMount () {
    // 在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('state')) {
      this.$store.commit('updateState', this.qs.parse(sessionStorage.getItem('state')))
    }
  },
  mounted () {
    // sessionStorage必须以字符串的形式存储
    // 在页面刷新时将信息保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('state', this.qs.stringify(this.$store.state)) // stringify转为字符串
    })
    // watch screen resizing and change screen width and height
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
        this.screenHeight = document.body.clientHeight
        this.$store.commit('heightWidth', {
          height: this.screenHeight,
          width: this.screenWidth
        })
      })()
    }
  },
  methods: {
    // reload () {
    //   this.isRouteAlive = false
    //   this.$nextTick(() => {
    //     this.isRouteAlive = true
    //   })
    // }
  }
}
</script>

<style>
@import "assets/css/base.css";
</style>
